<template>
	<view>
		<navbar :title="$t('goods.classifytitle')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor" :isBack="false">
		</navbar>
			<view class="classify">
				<view class="box1" >
					<scroll-view scroll-y="true" style="height: calc(100vh - 92px - var(--status-bar-height));background:#F6F6F6FF">
						<view :class="checked==item.id ? 'checked' : 'unchecked'"
						@click=change(item) v-for="item in list" :key="item.id">
							<view class="yellow">	
							</view>
							<view :class="checked==item.id ? 'price1' : 'price2'">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
				<scroll-view scroll-y="true" style="height: calc(100vh - 92px - var(--status-bar-height));">
				<view class="box2">
					<view class="goods" v-for="(item,index) in list1" :key="index" @click="navTo('../goods/good', {id: item.id, categoryid: item.category_id})"
					 >
						<u-image :src="item.cover_image" mode="" :show-error="false"
						height="190rpx" width="250rpx"></u-image>
						<view class="detail">
							<view class="name u-line-1">
								{{item.name}}
							</view>
							<view class="goods-price">
								{{$currency}}{{item.price}}
							</view>
							<view class="person">
								<image src="../../static/image/classify/renshu.png" mode=""
								></image>
								<view class="group">
									{{$t('home.persongroup', {num: item.group_buy_num})}}
								</view>
							</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
			<tabbar page="/pages/classify/classify"></tabbar>
	</view>
</template>

<script>
	import {
		goodslist,
		goodscategory
	} from '@/api/goods.js'
	export default {
		data() {
			return {
				number: '',
				checked:0,
				parentChecked: 0,
				
				list:[
				],
				list1:[
				]
			};
		},
		async onLoad(option) {
			if (option.index) {
				this.parentChecked = option.index;
			}
			await this.load();
			this.loadGoods();
		},
		methods: {
			async load() {
				let result = await goodscategory();
				this.list = result;
				this.checked = result[0].id;
				if (this.parentChecked) {
					this.checked = this.parentChecked
				}
			},
			async loadGoods() {
				let result = await goodslist({
					id: this.checked
				});
				this.list1 = result;
			},
			change(item) {
				this.checked = item.id,
				this.loadGoods()
			},
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.classify{
		display: flex;
		 .box1{
			 width: 160rpx;
		 }
		}
	.unchecked{
		.price2{
			width: 160rpx;
			height: 110rpx;
			background-color: #F6F6F6FF;
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #65676B;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 18rpx;
		}
	}
	.checked{
		position: relative;
		width: 160rpx;
		
		.yellow{
			position: absolute;
			left:0;
			top:36rpx;
			width: 10rpx;
			height: 38rpx;
			background-color:  $u-type-primary;
		}
		.price1{
			width: 160rpx;
			height: 110rpx;
			background-color: #FFFFFF;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;//rubick;
			font-weight: 400;
			color: #0F0F0E;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 18rpx;
		}
	}
		.footer{
			height: 97.5rpx;
			width: 750rpx;
			background-color: red;
			position: fixed;
			bottom: 0;
		}
	.box2{
		display: flex;
		border-radius: 20rpx;
		width: 590rpx;
		height: 332rpx;
		display: flex;
		flex-wrap: wrap;
		.goods{
			overflow: hidden;
			margin: 30rpx  0 0 30rpx;
			width: 250rpx;
			border: 2rpx solid #c17c1c;
			 border-radius: 20rpx;
			.detail{
				padding: 20rpx 0rpx 16rpx 16rpx;
				.name{
					font-size: 24rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #0F0F0E;
					line-height: 24rpx;
				}
				.goods-price{
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi;//rubick;
					font-weight: 400;
					color: #FC3E32;
					margin-top: 19rpx;
				}
				.person{
					display: flex;
					margin-top: 20rpx;
					align-items: center;
					.group{
						font-size: 24rpx;
						font-family: Rubik;
						font-weight: 300;
						color: #AAAAAA;
						margin-left: 11rpx;
					}
					image {
						height:17rpx;
						width:18rpx;
					}
				}
			}
		}
	}
</style>
